<template>
  <div class="group-tabs">
    <ul>
      <li
        v-for="(item, index) in list"
        :key="index"
        @click="selectItem(item[props.key], index)"
        :class="'flex' + rowNum"
      >
        <div
          class="listActive"
          v-if="!(cIndex != '' && cIndex != -1 && index >= showLen)"
          :class="{ active: cIndex == (isShowMoreBtn(index) ? index : '') }"
          :style="'margin-right:' + getMarginRight(index) + 'px'"
          >{{ isShowMoreBtn(index) ? '显示更多' : item[props.name]
          }}{{ isShowMoreBtn(index) ? '' : unit }}</div
        >
      </li>
    </ul>
  </div>
</template>

<script lang="ts">
export default {
  name: 'xc-group-tabs',
  props: {
    list: {
      type: Array,
      default: () => {
        return [];
      },
    },
    unit: {
      type: String,
      default: '',
    },
    showLen: {
      type: Number,
      default: 10000,
    },
    rowNum: {
      type: [String,Number], // auto 自动 行个数
      default: 3,
    },
    props: {
      type: Object,
      default: () => {
        return {
          key: 'id',
          name: 'name',
        };
      },
    },
  },
  data() {
    return {
      isShowMore: false,
      cIndex: -1,
    };
  },
  methods: {
    selectItem(key:string,index:number):void{
      if (this.cIndex == index) {
        this.isShowMore = true;
        this.cIndex = -1;
      } else {
        this.$emit('active', key);
      }
    },
    isRenderMoreList() {},
    isShowMoreBtn(index:number):boolean {
      //1、如果总长度大于9并且当前index==8 并且 isShowMore 为false
      if (
        this.list.length > this.showLen &&
        index == this.showLen - 1 &&
        !this.isShowMore
      ) {
        this.cIndex = index;
        return true;
      } else {
        return false;
      }
    },
    getMarginRight(index:number) : number {
      let rowNum = this.rowNum;
      if (typeof rowNum == 'number') {
        return (index + 1) % rowNum ? 6 : 0;
      } else {
        return 6;
      }
    },
  },
};
</script>
